
import { decorator } from "@/tools/fns/decorator";
import { Form, Input, message, Button } from "@/components/base";
import { observer } from "mobx-react";
import React from "react";
import { Controller } from "@/controller";
import styles from './index.module.less';

const userMap = {
    'yellen': { password: 'yellen123', username: '叶伦' },
    'zqq': { password: 'zqq123', username: '张青青' },
    'lichuan': { password: 'lichuan0615', username: '李川' },
    'xubo': { password: 'xubo123', username: '许波' },
}

const Login = decorator(observer)(function () {

    const controller = React.useContext(Controller.Context);

    const onFinish = React.useCallback((values: any) => {
        const { username, password } = values;
        if (userMap[username] && userMap[username].password === password) {
            controller.token = 'xxx-xxxx-xxxx-xxxx'; // 模拟登录成功，设置token
            controller.userInfo = { username: userMap[username].username } // 设置用户名
            window.sessionStorage.setItem('token', controller.token); // 保存token到本地存储
            window.sessionStorage.setItem('userInfo', JSON.stringify(controller.userInfo)); // 保存用户信息到本地存储
        } else {
            message.error({ content: '用户名或密码错误，请重试！' });
            controller.token = ''; // 清除token
        }
    }, [controller]);

    return (
        <div className={styles['login']}>
            <Form onFinish={onFinish} labelCol={{ flex: '70px' }} className={styles['form']} >
                <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]}>
                    <Input size='large' placeholder="请输入用户名" />
                </Form.Item>

                <Form.Item label="密码" name='password' rules={[{ required: true, message: '请输入密码' }]}>
                    <Input.Password size='large' placeholder="请输入密码" />
                </Form.Item>

                <Button block size='large' htmlType='submit' type='primary'>登陆</Button>
            </Form>
        </div>
    );
})
export default Login;